<template>
  <div id="manual">
  <el-row class="tac">
    <el-col :span="12" class="list">
      <el-menu
          :default-active=activeManual
          class="el-menu-vertical-demo"
          text-color="#fff">
        <!--      一级导航1-->
          <el-menu-item index="0" @click="mainPage();setActiveByNum(0)">
            <i class="el-icon-s-home"></i>
            <span slot="title" ref="Home" >主界面</span>
          </el-menu-item>
        <!--      一级导航2-->
        <el-submenu index="A">
          <template slot="title">
            <i class="el-icon-s-help"></i>
            <span>管理系统</span>
          </template>
          <el-menu-item-group>
            <router-link to="/system/BookManage">
              <el-menu-item index="1" @click="open(1);setActiveByNum(1)"><i class="el-icon-reading"></i>图书管理</el-menu-item>
            </router-link>
            <router-link to="/system/MagazineManage">
              <el-menu-item index="2" @click="open(2);setActiveByNum(2)"><i class="el-icon-document"></i>期刊管理</el-menu-item>
            </router-link>
            <router-link to="/system/BorrowManage">
              <el-menu-item index="3" @click="open(3);setActiveByNum(3)"><i class="el-icon-notebook-1"></i>借阅管理</el-menu-item>
            </router-link>
            <router-link to="/system/StaffManage">
              <el-menu-item index="4" @click="open(4);setActiveByNum(4)"><i class="el-icon-user"/>人事管理</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>
        <!--      一级导航3-->
        <router-link to="/system/ProClaim">
          <el-menu-item index="5" @click="open(5);setActiveByNum(5)">
            <i class="el-icon-data-board"></i>
            <span slot="title" >公告</span>
          </el-menu-item>
        </router-link>
        <!--      一级导航4-->
        <router-link to="/system/Editor" >
        <el-menu-item index="6" @click="open(6);setActiveByNum(6)">
          <i class="el-icon-video-camera-solid"></i>
          <span slot="title">编辑输入</span>
        </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";

export default {
  name: "Manual",
  data() {
    return {
      activeManual: "0"
    }
  },
  methods: {//开启对应的小标签栏
    ...mapMutations(['open', 'setActiveByNum']),//展开运算符从store index.js中映射open函数
    mainPage() {
      this.$router.push({path: '/system/DefaultManual'});
      this.open(0);
    },
  },
  computed: {
    ...mapState(['activeNum']),
    resetMainPage() {
      return this.$store.state.taglength
    },
    activeManualNum() {
      return this.activeNum
    }
  },
  watch: {
    resetMainPage(newdata, olddata) {
      if (newdata === 0) {
        this.mainPage();
      }
    },
    activeManualNum(newdata, olddata) {
      this.activeManual = newdata.toString();
      // }
    }
    /*  ref="defaultclick"   //初始点击
    mounted() {
      this.$refs.defaultclick.click();//模拟点击
    }*/
    /*   watch: { //监听路由变化时触发事件
    $route(to, from) {
      let name = to.path.match(/[^/system/].+/g);
      if (name.toString() === "DefaultManual") {
        this.$refs.Home.click();
      }
    }
  } */
  }
}
</script>

<style scoped>
a { /*router-link的本质是a标签，去除下划线*/
  text-decoration: none;
}

.list {
  width: 100%;
}

>>> .el-menu-item.is-active {
  color: #ffc400;
  background-color: #2e60b1;
}

>>> .el-submenu__title i { /*展开式一级导航栏 图标*/
  color: white;
}

>>> .el-submenu__title { /*展开式一级导航栏*/
  background-color: #438aff;
}

>>> .el-submenu .el-menu { /*展开式一级导航栏 内部*/
  background-color: #438aff;
}

.el-menu-item { /*展开式所有子选项卡*/
  min-width: 130px !important;
}

/* hover*/
>>> .el-submenu__title:hover { /*所有父选项卡hover*/
  background-color: #2e60b1;
}

.el-menu-item:hover { /*所有子选项卡hover*/
  background-color: #2e60b1;
}

.el-menu-item i { /*一级导航栏 图标*/
  color: white;
}

.el-menu { /*底部一级导航栏*/
  border: none;
  background-color: #438aff;
}
</style>